<template>
  <div class="users_content">
    <div class="card-container">
      <div class="header">
        <el-form
          :inline="true"
          :model="formOptions"
          :rules="queryRules"
          class="demo-form-inline"
          size="mini"
          ref="userQueryRef"
          label-position="right"
        >
          <div class="row">
            <div class="col">
              <el-form-item
                label="接口人"
                prop="name"
              >
                <el-input
                  v-model="formOptions.name"
                  placeholder="接口人姓名"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item
                label="客户"
                prop="customerId"
              >
                <el-select
                  v-model="formOptions.customerId"
                  placeholder="请选择客户名称"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in tableCustomer"
                    :key="item.index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col"></div>
            <div class="col"></div>
            <div style="width:250px"
            >
              <el-form-item>
                <el-button class="header-btn"
                  type="primary"
                  @click="resetForm('userQueryRef')"
                >
                <img src="../../../assets/img/globalTable/icon2-reset.png" alt="">
                重置</el-button>
                <el-button class="header-btn"
                  type="primary"
                  @click="queryUserListclick"
                >
                <img src="../../../assets/img/globalTable/icon1-search.png" alt="">
                查询</el-button>
                <el-button class="header-btn"
                  type="primary"
                  @click="addClick"
                >
                <img src="../../../assets/img/globalTable/icon3-add.png" alt="">
                新增</el-button>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>

      <el-card >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          size="mini"
          :height="tableHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="接口人"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="cellPhone"
            label="手机号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户名"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="{ row, $index }">
              <span class="operate-btn"
                @click="detailsClick(row)"
                type="primary"
                size="mini"
              >查看</span>
              <span class="operate-btn"
                @click="handleClick(row)"
                type="primary"
                size="mini"
              >编辑</span>
              <span class="operate-btn"
                type="primary"
                size="mini"
                @click="deleteMenu(row, $index)"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationOptions.pageNo"
            :page-sizes="paginationOptions.pageSizes"
            :page-size="paginationOptions.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginationOptions.total"
            size="mini"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <interface-edit
      :toChild="list"
      :tableData="tableData"
      :tableCustomer="tableCustomer"
      ref="userEditDialogRef"
    ></interface-edit>
    <interface-details
      :toChild="list"
      ref="userDaitDialogRef"
    ></interface-details>
  </div>
</template>

<script>
// 客户查询
import { queryCustomer } from "@/api/customer";
import { queryInterface, deletesInterface } from "@/api/interface";
import interfaceEdit from "@/views/app/interface/dialog/interfaceEdit.vue";
import interfaceDetails from "@/views/app/interface/dialog/interfaceDetails.vue";
export default {
  components: {
    interfaceEdit,
    interfaceDetails,
  },
  data () {
    return {
      list: "",
      formOptions: {
        customerId: "",
        name: "",
      },
      queryRules:{
        name:[
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
            message: "包含空格或者非法字符",
            trigger: ["blur", "change"],
          }
        ]
      },
      paginationOptions: {
        pageNo: 1,
        pageSizes: [10, 20, 30, 50, 100],
        pageSize: 10,
        toatl: 0
      },
      tableData: [],
      tableCustomer: [],
    };
  },
  computed: {
    tableHeight() {
      return this.$store.state.tableHeight-440;
    }
  },
  mounted () {
    this.queryUserList();
    this.queryCustomer()
  },
  methods: {
    //手动 查询接口人
    queryUserListclick () {
      this.$refs["userQueryRef"].validate((valid) => {
        if (valid) {
          this.paginationOptions.pageNo = 1;
          this.queryUserList();
        } else {
          return false;
        }
      });
    },
    // 查询接口人列表
    queryUserList () {
      queryInterface({
        current: this.paginationOptions.pageNo,
        size: this.paginationOptions.pageSize,
        records: [this.formOptions]
      }).then((res) => {
        if (res && res.code && res.code === "00000") {
          this.tableData = res.data.records;
          this.paginationOptions.total = res.data.total
          this.paginationOptions.pageNo=res.data.current
        }
      });
    },
    queryCustomer () {
      queryCustomer({
        current: 1,
        size: 1000000,
        records: [{}]
      }).then((res) => {
        if (res && res.code && res.code === "00000") {
          this.tableCustomer = res.data.records;
        }
      });
    },
    // 删除弹框
    deleteMenu (row, index) {
      this.$confirm("此操作将永久删除该接口人, 是否继续?", "删除接口人", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
        modal: false,
      })
        .then(() => {
          deletesInterface(row.id).then((res) => {
            console.log(res, "点击确认，发起后台请求，删除该接口人");
            if (res && res.code && res.code === "00000") {
              this.queryUserList()
              return this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addClick () {
      this.$refs.userEditDialogRef.openDialog();
      this.list = "添加接口人";
    },
    handleClick (row) {
      this.$refs.userEditDialogRef.openDialog(row);
      this.list = "编辑接口人信息";
    },
    detailsClick (row) {
      this.$refs.userDaitDialogRef.openDialog(row);
      this.list = "查看接口人详情";
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange (val) {
      this.paginationOptions.pageSize = val;
      this.queryUserList();
    },
    handleCurrentChange (val) {
      this.paginationOptions.pageNo = val;
      this.queryUserList();
    },
    indexMethod (index) {
      return (
        (this.paginationOptions.pageNo - 1) * this.paginationOptions.pageSize +
        index +
        1
      );
    },
  },
};
</script>


<style lang='less' scoped>
// .btn-custom-cancel {
//   float: right;
//   margin-left: 10px;
// }
</style>
<style lang="less" scoped>
::v-deep .el-col-14 {
  text-align: right;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}

@media screen and (min-width: 1700px) {
  ::v-deep .el-card__body::-webkit-scrollbar {
    display: none;
  }
}
::v-deep .el-card__body {
  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
.el-form-item {
  width: 261px;
}
::v-deep .el-col-5 {
  overflow: hidden;
}
</style>
